/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:42:41
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-12 15:34:02
 */

define(['jquery', 'd3', 'util','hammer'], function($, d3, util,Hammer) {
	function product(data) {
		var setting = {
			selector: '#one',
			colorset: ['#ffc75a', '#eeeeee'],
			series: [{
				nameStyle: {
					'font-size': '14px'

				},
				valueStyle: {
					'font-size': '22px',
					'fill': '#ffc75a'
				},
				data: [{
					'name': '信托',
					'value': 50
				}, {
					'name': '其他',
					'value': 90
				}]
			}],
			radius: ['50%', '40%'],
			center: ['50%', '50%']

		}
		var selector = ['.li1', '.li2', '.li3', '.li4', '.li5', '.li6', '.li7']
		
		var colorset = ["#fe8989", "#feb389", "#fef289", "#89fea2", "#74eeef", "#89c6fe", "#cebafc"]
		for (var i = 0; i < data.length; i++) {
			setting.selector = selector[i]
			setting.colorset[0] = colorset[i]
			setting.series[0].data = data[i]
			one(setting)
		}

		function one(setting) {

			//console.log(setting)
			var width, height, selector, radius, colorset, center, innerR, outerR, series, centerX, centerY, startA, endA,
				dom, position, arc, pie, translate, endAngle, sum,
				name, value

			var svg, content, left, right

			var leftStartA = -Math.PI,
				rightStartA = 0,
				leftEndA = 0,
				rightEndA = 2 * Math.PI

			selector = setting.selector
			dom = document.querySelector(selector)
			position = dom.getBoundingClientRect()
			width = position.width
			height = position.height
			radius = setting.radius
			center = setting.center
			colorset = setting.colorset
			outerR = util.util.getNumByRate(width, radius[0])
			innerR = util.util.getNumByRate(width, radius[1])
			centerX = util.util.getNumByRate(width, center[0])
			centerY = util.util.getNumByRate(height, center[1])
			translate = centerX + ',' + centerY
			startA = 0
			endA = 2 * Math.PI
			series = setting.series
			name = series[0].data[0].name,
				sum = d3.sum(series[0].data, function(d, i) {

					return d['value']
				})
			value = (series[0].data[0].value * 100 / sum).toFixed(0) + '%'
			arc = d3.svg.arc()
				.innerRadius(innerR)
				.outerRadius(outerR)

			pie = d3.layout.pie()
				.value(function(d, i) {

					return Number(d.value)
				})
				.sort(null)
				.startAngle(startA)
				.endAngle(endA)

			svg = d3.select(selector)
				.append('svg')
				.attr('width', width)
				.attr('height', height)
				.attr("class", "yuan")



			content = svg.append('g')
				.attr('transform', 'translate(' + translate + ')')


			//两色的环
			content.selectAll('.arc')
				.data(pie(series[0].data))
				.enter()
				.append('g')
				.append('path')
				.attr('fill', function(d, i) {

					return colorset[i]
				})
				.transition()
				.duration(2000)
				.attrTween('d', function(d, i) {

					if (i === 0) {

						endAngle = d.endAngle
					}
					// d.innerRadius = 0
					var i = d3.interpolate({
						startAngle: startA,
						endAngle: endA
					}, d)
					return function(t) {
						return arc(i(t))
					}
				})


			left = d3.svg.arc()
				.innerRadius(0)
				.outerRadius((outerR - innerR) / 2)
				.startAngle(leftStartA)
				.endAngle(leftEndA)

			right = d3.svg.arc()
				.innerRadius(0)
				.outerRadius((outerR - innerR) / 2)
				.startAngle(rightStartA)
				.endAngle(rightEndA)

			//环左边的圆
			content.append('g')
				.append('path')
				.attr('transform', 'translate(0, ' + (-(innerR + outerR) / 2) + ')')
				.attr('fill', colorset[0])
				.transition()
				.duration(2000)
				.attr('d', left)
			//环右边的圆
			content.append('g')
				.append('path')
				.attr('transform', 'translate(0, ' + (-(innerR + outerR) / 2) + ')')
				.attr('fill', colorset[0])
				.transition()
				// .delay(10)
				.duration(2000)
				.attr('d', right)
				.attrTween('transform', function(d) {

					var j = d3.interpolate({
						endAngle: 0
					}, {
						endAngle: endAngle
					})
					return function(t) {

						var x = ((innerR + outerR) / 2) * Math.cos(j(t).endAngle - Math.PI / 2)
						var y = ((innerR + outerR) / 2) * Math.sin(j(t).endAngle - Math.PI / 2)

						return 'translate(' + x + ',' + y + ')';
					}
				})

			//环左边中间的白色环
			content.append('g')
				.append('circle')
				.attr('cx', 0)
				.attr('cy', (-(innerR + outerR) / 2))
				.attr('fill', '#fff')
				.attr('r', (outerR - innerR) * 0.6 / 2)

			//环中间的文字
			content.append('text')
				.text(name)
				.attr('text-anchor', 'middle')
				.attr('y', -util.util.getTextSize(name, series[0].nameStyle).height * 2 / 3)
				.style(series[0].nameStyle)

			content.append('text')
				.text(function() {

					return value
				})
				.attr('text-anchor', 'middle')
				.attr('y', util.util.getTextSize(value, series[0].valueStyle).height * 2 / 3)
				.style(series[0].valueStyle)

			var hammertime = new Hammer(document.querySelector("#one_1"));
			//添加事件
			var cur = -40
			var cur1 = -40

			var ulWidth = $("#one_1").width()
			var num = 0
			var flag = false

			hammertime.on("pan", function(e) {
				flag = true

				cur += e.deltaX;

				if (cur * 0.2 > -40) {
					cur = -40 / 0.2;
					$("#one_1").css("margin-left", -40)

					return
				}
				if (cur * 0.2 < -ulWidth * 3 / 7) {
					cur = -ulWidth * 3 / 7 / 0.2
					console.log(cur)
					$("#one_1").css("margin-left", -ulWidth * 3 / 7 - ulWidth * 0.04 + 40)

					return
				}

				$("#one_1").css("margin-left", cur * 0.2)
			})

			var hammertime1 = new Hammer(document.querySelector(".pref"));
			hammertime1.on("tap", function(e) {
				if (flag) {
					$("#one_1").animate({
						marginLeft: -ulWidth * 3 / 7 - ulWidth * 0.04 + 40
					}, 200)
					flag = false
					num = -3
					cur1 = -ulWidth * 3 / 7 - ulWidth * 0.04 + 40
					console.log(cur)
				} else {
					num = num - 1

					if (num < -3) {
						num = -3
						return
					}

					cur1 -= parseInt(0.99 * ulWidth / 7)
					$("#one_1").animate({
						marginLeft: cur1
					}, 200)
				}
			})
			var hammertime2 = new Hammer(document.querySelector(".next"));
			hammertime2.on("tap", function(e) {
				if (flag) {
					$("#one_1").animate({
						marginLeft: -40
					}, 200)
					flag = false
					num = 0
					cur1 = -40
				} else {
					num = num + 1

					if (num > 0) {
						num = 0
						return
					}

					cur1 += parseInt(0.99 * ulWidth / 7)
					$("#one_1").animate({
						marginLeft: cur1
					}, 200)
				}

			})


		}
	}

	return {
		product : product
	}
})